<template>
  <div class="main">
    <div class="w">
      <a-card class="cardBox about">
        <div class="tit" slot="title">横店影视文化产业大脑</div>
        <div class="content">
          <div v-for="(item, i) in aboutData" :key="i">
            <span>{{ item.tit }}：</span>
            <p> {{ item.des }}</p>
          </div>
          <a @click="cockpitClick">横店影视文化产业大脑驾驶舱</a>
        </div>
      </a-card>
      <!--核心指标-->
      <a-card class="cardBox coreIndex">
        <div class="tit" slot="title">核心指标 <span>(更新频率：实时)</span><div class="nowTime">{{ nowtime | updatetime }} 星期{{ week|getweek }}</div></div>
        <div class="content">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-card>
                <div class="tit" slot="title">企业服务</div>
                <div class="items" v-for="(item, i) in coreIndexL" :key="i">
                  <div :class="`item ${i===0?'itemCursor':''}`" @click="coreClick(item, i)">
                    <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
                    <div class="num">{{ item.num }}
                      <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
                    </div>
                    <div class="name">{{ item.name }}({{item.unit}}) {{i===0?'>':''}}</div>
                  </div>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <div class="tit" slot="title">剧组服务</div>
                <div class="items" v-for="(item, i) in coreIndexC" :key="i">
                  <div :class="`item ${i===0?'itemCursor':''}`" @click="coreClick(item, i)">
                    <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
                    <div class="num">{{ item.num }}
                      <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
                    </div>
                    <div class="name">{{ item.name }}({{item.unit}}) {{i===0?'>':''}}</div>
                  </div>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <div class="tit" slot="title">人才服务</div>
                <div class="items" v-for="(item, i) in coreIndexR" :key="i">
                  <div :class="`item ${i===0?'itemCursor':''}`" @click="coreClick(item, i)">
                    <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
                    <div class="num">{{ item.num }}
                      <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
                    </div>
                    <div class="name">{{ item.name }}({{item.unit}}) {{i===0?'>':''}}</div>
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>

          <!--<div class="items" v-for="(item, i) in coreIndexData" :key="i">
            <div :class="`item ${i<3?'itemCursor':''}`" @click="coreClick(item, i)">
              <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
              <div class="num">{{ item.num }}
                <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
              </div>
              <div class="name">{{ item.name }}({{item.unit}}) {{i<3?'>':''}}</div>
            </div>
          </div>-->
        </div>
      </a-card>
      <!--痛点与难点-->
      <a-card class="cardBox difficulty">
        <div class="tit" slot="title">痛点与难点</div>
        <div class="content">
          <div class="diffL">
            <div class="tits">四个需求</div>
            <div class="itemXq xq1" @click="demandClick(1)">
              <p>影视拍摄标准不统一</p>
              <p>信息化程度低</p>
              <a-icon class="icoRight" type="double-right" />
            </div>
            <div class="itemXq xq2" @click="demandClick(2)">
              <p>产业配套供应不畅通</p>
              <p>上下游产业链延伸能力不足</p>
              <a-icon class="icoRight" type="double-right" />
            </div>
            <div class="itemXq xq3" @click="demandClick(3)">
              <p style="padding-top:9px">版权交易机制不完善</p>
              <p>后期制作成本高"</p>
              <a-icon class="icoRight" type="double-right" />
            </div>
            <div class="itemXq xq4" @click="demandClick(4)">
              <p>产业数据积累不够</p>
              <p>风险和机遇预判不精准"</p>
              <a-icon class="icoRight" type="double-right" />
            </div>
          </div>
          <div class="diffR">
            <div class="tits">
              <span class="s1">八类问题</span>
              <span class="s2">36个痛点</span>
              <span class="s3">八大应用</span>
            </div>
            <ul>
              <li>
                <div class="item1">
                  <p>1.影视工业化程度低，没有标准的拍摄业务流程，剧组成本往往无法有效控制</p>
                  <p>2.演职人员流动性大，政府管理难、横漂基本权益维护难</p>
                </div>
                <div class="item2">···</div>
                <div class="item3">
                  <p>剧组综合服务系统（云勘景）</p>
                  <p>人才综合服务系统（横影通）</p>
                </div>
              </li>
              <li>
                <div class="item1">
                  <p>3.供应链缺乏交易平台，服化道采购渠道单一，配套供需匹配不精准</p>
                  <p>4.影视作品生命周期短，提前部署IP转化意识弱，衍生品开发渠道有待拓展</p>
                </div>
                <div class="item2">···</div>
                <div class="item3">
                  <p>服化道供应链系统</p>
                  <p>衍生品交易系统</p>
                </div>
              </li>
              <li>
                <div class="item1">
                  <p>5.影视版权交易缺乏确权认定平台，版权侵权发现难、保护成本高</p>
                  <p>6.传统影视拍摄和剪辑环节完全割裂，视频传输慢，后期制作硬件更新成本高，现场补拍时间成本高</p>
                </div>
                <div class="item2">···</div>
                <div class="item3">
                  <p>版权区块链交易系统</p>
                  <p>影视制作云</p>
                </div>
              </li>
              <li>
                <div class="item1">
                  <p>7.产业数据没有沉淀积累，分析决策缺乏数据支撑，无法精准掌控产业运行态势</p>
                  <p>8.缺乏企业画像，无法为企业提供特色、高效服务</p>
                </div>
                <div class="item2">···</div>
                <div class="item3">
                  <p>决策分析系统</p>
                  <p>企业服务管理系统（政企通）</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="clear"></div>
          <!--<a-row :gutter="16">
            <a-col :span="8"></a-col>
            <a-col :span="16"></a-col>
          </a-row>-->
        </div>
      </a-card>
      <!--多跨协同-->
      <a-card class="cardBox teamwork">
        <div class="tit" slot="title">多跨协同</div>
        <div class="content">
          <div style="    background: #eee;
    border-radius: 6px;
    padding: 8px 12px;">贯通公检法司、教育、人社、税务、应急等16个部门和层级数据，沉淀共享500余个字段数据，构建剧组和影视人员画像，创新地提供全方位人才、剧组相关业务智能服务。</div>
          <a-row :gutter="16">
            <a-col :span="6">
              <div class="item itemBg1">
                <div class="name">卫健部门</div>
                <div class="desc">筛查申请横影码的影视人才疫苗接种情况，做到疫情防控常态化</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="item itemBg2">
                <div class="name">公安部门</div>
                <div class="desc">通过获取注册横影码的身份信息，排查影视人才违法犯罪情况，杜绝“带病进组”现象</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="item itemBg3">
                <div class="name">人社部门</div>
                <div class="desc">交互影视人才信息，精准推送人才政策，全盘掌握横店流动人员的社会保障情况</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="item itemBg4">
                <div class="name">税务部门</div>
                <div class="desc">将一站式剧组服务中的费用结算凭证推送至业务部门，减少偷税漏税现象</div>
              </div>
            </a-col>
          </a-row>
          <div class="brainBox">
            <div class="topLine">
              <span class="l1"></span>
              <span class="l2"></span>
              <span class="l3"></span>
              <span class="l4"></span>
              <span class="l5"></span>
            </div>
            <div class="bottomLine">
              <span class="l1"></span>
              <span class="l2"></span>
              <span class="l3"></span>
              <span class="l4"></span>
              <span class="l5"></span>
            </div>
            <div class="brain" @click="brainClick">
              <div class="itemP">
                <p>影视文化</p>
                <p>产业大脑</p>
              </div>
            </div>
          </div>
          <a-row :gutter="16">
            <a-col :span="6">
              <div class="item itemBg3">
                <div class="name">应急管理部门</div>
                <div class="desc">将剧组拍摄中高危作业申请、爆炸拍摄、用火拍摄等项目与应急管理局业务部门同步，保障拍摄中的安全生产等</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="item itemBg4">
                <div class="name">教育部门</div>
                <div class="desc">推送影视人才子女入学等教育政策</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="item itemBg1">
                <div class="name">医保部门</div>
                <div class="desc">个人医保和影视公司参保信息，医保关系转移接续等信息交互</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="item itemBg2">
                <div class="name">市场监管部门</div>
                <div class="desc">提供影视企业注册，市场综合监督管理和知识产权管理服务</div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-card>
      <!--应用成效-->
      <a-card class="cardBox appEffect">
        <div class="tit" slot="title">应用成效</div>
        <div class="content">
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="产业经济">
              <div class="itemBox">
                <div class="items" v-for="(item, i) in industrialData" :key="i">
                  <div class="item" style="position: relative">
                    <div :class="`ico ico${i}`">
                      <i class="iconfont icon-24gl-city3" v-if="i==0"></i>
                      <i class="iconfont icon-24gl-city4" v-if="i==1"></i>
                      <i class="iconfont icon-24gl-city" v-if="i==2"></i>
                      <i class="iconfont icon-zongyingshou" v-if="i==3"></i>
                      <i class="iconfont icon-icon-shuishou" v-if="i==4"></i>
                    </div>
                    <p class="name">{{ item.name }}</p>
                    <p class="val">{{ item.num }}<small>{{ item.unit }}</small></p>
                  </div>
                </div>
              </div>
              <a-row :gutter="16" style="margin-top: 20px;">
                <a-col :span="12">
                  <dv-charts :option="revenueOption" style="width: 100%; height: 300px" />
                </a-col>
                <a-col :span="12">
                  <dv-charts :option="taxRevenueOption" style="width: 100%; height: 300px" />
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="2" tab="横店出品">
              <a-row :gutter="16" style="margin-top: 20px;">
                <a-col :span="9">
                  <div style="display: flex">
                    <div style="width: 260px; height: 260px;">
                      <dv-active-ring-chart :config="ringChartHdcp" style="width:100%;height:100%" />
                    </div>
                    <div class="label-tag">
                      <div class="label-item" v-for="(label, i) in ringChartHdcp.data" :key="i">
                        <div :style="`background-color: ${ringChartHdcp.color[i % ringChartHdcp.color.length]};`" />{{ label.name }}<span>{{ label.value }}</span>{{ label.unit }}
                      </div>
                    </div>
                  </div>
                </a-col>
                <a-col :span="15">
                  <dv-charts :option="spslOption" style="width: 100%; height: 260px" />
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="3" tab="影视拍摄">
              <div class="itemBox">
                <div class="items" v-for="(item, i) in movieData" :key="i">
                  <div class="item">
                    <div :class="`ico ico${i}`">
                      <i class="iconfont icon-yingshi" v-if="i==0"></i>
                      <i class="iconfont icon-paishe" v-if="i==1"></i>
                      <i class="iconfont icon-paishe-" v-if="i==2"></i>
                      <i class="iconfont icon-zongyingshou" v-if="i==3"></i>
                      <i class="iconfont icon-renshu" v-if="i==4"></i>
                    </div>
                    <p class="name">{{ item.name }}</p>
                    <p class="val">{{ item.num }}<small>{{ item.unit }}</small></p>
                  </div>
                </div>
              </div>
              <a-row :gutter="16" style="margin-top: 20px;">
                <a-col :span="10">
                  <dv-charts :option="liveActionOption" style="width: 100%; height: 300px" />
                </a-col>
                <a-col :span="14">
                  <dv-charts :option="crewNumOption" style="width: 100%; height: 270px" />
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="4" tab="影视人才">
              <a-row :gutter="16">
                <a-col :span="24">
                  <ul class="personnel">
                    <li v-for="(item, i) in personnelData" :key="i">
                      <div class="item">
                        <div :class="`ico ico${i}`">
                          <i class="iconfont icon-yingshi" v-if="i==0"></i>
                          <i class="iconfont icon-renshu" v-if="i==1"></i>
                          <i class="iconfont icon-huoyuerenshu" v-if="i==2"></i>
                          <i class="iconfont icon-fenbu" v-if="i==3"></i>
                        </div>
                        <p class="val">{{item.num}}<span>{{item.unit}}</span></p>
                        <p class="name">{{item.name}}</p>
                      </div>
                    </li>
                  </ul>
                </a-col>
                <a-col :span="24">
                  <a-row>
                    <a-col :span="8">
                      <div class="person">
                        <div style="width: 260px; height: 260px; margin: auto">
                          <dv-active-ring-chart :config="ringChartGzfx" style="width:100%;height:100%" />
                        </div>
                        <div class="labelTag">
                          <div class="labelItem" v-for="(label, i) in ringChartGzfx.data" :key="i">
                            <div :style="`background-color: ${ringChartGzfx.color[i % ringChartGzfx.color.length]};`" />{{ label.name }}
                          </div>
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="person">
                        <div style="width: 260px; height: 260px; margin: auto">
                          <dv-active-ring-chart :config="ringChartXlfx" style="width:100%;height:100%" />
                        </div>
                        <div class="labelTag">
                          <div class="labelItem" v-for="(label, i) in ringChartXlfx.data" :key="i">
                            <div :style="`background-color: ${ringChartXlfx.color[i % ringChartXlfx.color.length]};`" />{{ label.name }}
                          </div>
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="person">
                        <div style="width: 260px; height: 260px; margin: auto">
                          <dv-active-ring-chart :config="ringChartNlfx" style="width:100%;height:100%" />
                        </div>
                        <div class="labelTag">
                          <div class="labelItem" v-for="(label, i) in ringChartNlfx.data" :key="i">
                            <div :style="`background-color: ${ringChartNlfx.color[i % ringChartNlfx.color.length]};`" />{{ label.name }}
                          </div>
                        </div>
                      </div>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </div>

      </a-card>
      <!--流程再造-->
      <a-card class="cardBox flowPath">
        <div class="tit" slot="title">流程再造
          <div class="buts">
            <a-button size="small" class="but-blue" @click="recceClick(1)">勘景</a-button>
            <a-button size="small" class="but-orange" @click="recceClick(2)">参演</a-button>
          </div>
        </div>
        <div class="content">
          <div style="    background: #eee;
    border-radius: 6px;
    padding: 8px 12px;">
            改革突破性。创新人才服务体系，为演职人员提供就业、生活等阳光、全流程服务，实现影视人才学习-工作-生活闭环管理。重塑剧组拍摄机制，提供生产要素一站式供给，形成剧本到内容的产业链闭环，真正实现“拿着剧本来，带着作品走”的横店拍摄模式。提供理论支持，编制国际性指数、综合景气指数、集聚区指数、发展环境指数、影响力指数、产业创新指数，迭代横店牵头编制的国标《影视拍摄基地服务规范》等标准，为影视产业数字化赋能。
          </div>
          <a-card style="margin-top: 20px">
            <div style="background: #f8f8f8;
    margin-bottom: 16px; color: #999;border-radius: 5px;
    font-size: 15px;
    padding: 8px 15px;
    position: relative;">改革前：业务流程繁杂且信息化程度低，缺少政府侧服务和管理指导</div>
            <img src="@/assets/img/liu1.png" style="max-width: 100%">
          </a-card>
          <a-card style="margin-top: 20px">
            <div style="background: #ee9a46;
    font-size: 15px;
    padding: 8px 15px;color: #fff;
    border-radius: 5px;
    position: relative;">改革后：通过横影码赋能影视拍摄全流程的信息化，打通各业务部门，实现多跨协同</div>
            <img src="@/assets/img/liu2.png" style="max-width: 100%">
          </a-card>
        </div>
      </a-card>
      <!--数据清单-->
      <a-card class="cardBox">
        <div class="tit" slot="title">规范建设</div>
        <div class="content">

          <a-row :span="16">
            <a-col :span="24">
              <img src="@/assets/img/js1.png" style="max-width: 90%;
    margin: auto;
    display: block;">
            </a-col>
            <a-col :span="24">
              <div style="padding-top:50px; font-size:16px">
                运用“V字模型”，制定影视文化产业全产业链的改革方案，将产业环节分解成8项应用场景、67项任务，1300项最小颗粒度事项，框架上对标省“152”体系，搭建了“1个数据中心、8个重大应用、N个理论和制度成果”的“1+8+N”架构，横向打通大数据局、“数字东阳”等系统的连通，编制IRS应用目录，做到数据实时交互，构建分析算法，在“数字驾驶舱”归集分析。系统在身份认证、访问授权、机密性、隐私保护等方面从不同的层级制定了相应的安全策略，形成了纵深防御安全体系。

              </div>
            </a-col>
          </a-row>
          <div style="border-top: 1px solid #ccc;
    margin-top: 40px;
    overflow: hidden;">
            <img src="@/assets/img/js2.jpg" style="max-width: 100%;margin-top: -40px;">
          </div>
          <!--<a-row :span="16">
            <a-col :span="12">
              <dv-charts :option="kqqkOption" style="width: 100%; height: 300px" />
            </a-col>
            <a-col :span="12">
              <div style="padding-right: 30px">
                <div class="title" style="padding-bottom: 10px">十一月实景剧组拍摄数</div>
                <dv-scroll-ranking-board :config="jzpsConfig" style="width:100%;height:220px" />
              </div>
            </a-col>
          </a-row>-->
        </div>
      </a-card>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-card class="cardBox ">
            <div class="tit" slot="title">工作专班</div>
            <div class="content work">
              <div class="itemTit">{{workData.title}}</div>
              <div class="itemWarp">
                <div class="items">
                  <div class="item" v-for="(item, i) in workData.list" :key="i">{{item}}</div>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="cardBox " :tab-list="tabList" :active-tab-key="noTitleKey" @tabChange="key => onTabChange(key, 'noTitleKey')">
            <!--<div class="tit" slot="title">理论/制度成果</div>-->
            <div class="content" style="height: 352px">
              <div v-if="noTitleKey==='tab1'">
                <ul class="files">
                  <li v-for="(item, i) in filesData" :key="i" @click="filesRowClick(item)">
                    <span>{{i+1}}</span><p class="ellipsis">{{item.name}}</p>
                  </li>
                </ul>
              </div>
              <div v-if="noTitleKey==='tab2'">
                <ul class="files">
                  <li v-for="(item, i) in filesData2" :key="i" @click="filesRowClick(item)">
                    <span>{{i+1}}</span><p class="ellipsis">{{item.name}}</p>
                  </li>
                </ul>
              </div>
              <div v-if="noTitleKey==='tab3'">
                <ul class="files">
                  <li v-for="(item, i) in filesData3" :key="i" style="cursor: default;">
                    <span>{{i+1}}</span><p class="ellipsis">{{item.name}}</p>
                  </li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <a-modal v-model="coreVisible" width="70%" :footer="null" :centered="true" :title="coreTit">
        <a-row :gutter="16" v-if="coreIndex===0">
          <a-col :span="16">
            <dv-charts :option="coreOption" style="width: 100%; height: 340px" />
          </a-col>
          <a-col :span="8">
            <dv-charts :option="serviceOption" style="width: 100%; height: 340px" />
          </a-col>
        </a-row>
        <div v-if="coreIndex===1">
          <dv-charts :option="crewOption" style="width: 100%; height: 340px" />
        </div>
        <div v-if="coreIndex===2">
          <dv-charts :option="peopleOption" style="width: 100%; height: 340px" />
        </div>
      </a-modal>
      <!--recce-->
      <a-modal v-model="recceVisible" width="70%" :footer="null" :centered="true" title="云勘景场景">
        <div class="modalContent">
          <div class="subCon">
            <div class="biaoti">改革前痛点：效率低、成本高、时间协调困难</div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#eee'}">
                  <div class="subCardTit grey" slot="title">改革前</div>
                  <div class="subCardTxt">
                    <img src="@/assets/img/lc1.png">
                  </div>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#e6f7ff'}">
                  <div class="subCardTit" slot="title">改革后</div>
                  <div class="subCardTxt" style="height: 648px;">
                    <img src="@/assets/img/lc2.png">
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-modal>
      <a-modal v-model="partInVisible" width="70%" :footer="null" :centered="true" title="横影通场景">
        <div class="modalContent">
          <div class="subCon">
            <div class="biaoti">改革前痛点：手续多</div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#eee'}">
                  <div class="subCardTit grey" slot="title">改革前</div>
                  <div class="subCardTxt">
                    <img src="@/assets/img/lc3.png">
                  </div>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#e6f7ff'}">
                  <div class="subCardTit" slot="title">改革后</div>
                  <div class="subCardTxt" style="height: 562px;">
                    <img src="@/assets/img/lc4.png">
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-modal>
      <a-modal v-model="filesVisible" width="70%" :footer="null" :centered="true" :title="filesTitle">
        <div class="modalContent">
          <img v-if="filesImgSrc===1" src="@/assets/img/pic1.png" class="filesImg">
          <img v-if="filesImgSrc===2" src="@/assets/img/pic2.png" class="filesImg">
          <img v-if="filesImgSrc===3" src="@/assets/img/pic3.png" class="filesImg">
          <img v-if="filesImgSrc===4" src="@/assets/img/pic4.png" class="filesImg">
          <img v-if="filesImgSrc===5" src="@/assets/img/pic5.png" class="filesImg">
          <img v-if="filesImgSrc===6" src="@/assets/img/pic6.png" class="filesImg">
        </div>
      </a-modal>
      <a-modal v-model="brainVisible" width="70%" :footer="null" :centered="true" title="横店影视文化产业大脑">
        <div class="modalContent">
          <img src="@/assets/img/cydn.png" class="filesImg">
        </div>
      </a-modal>

      <a-modal v-model="demandVisble" width="70%" :footer="null" :centered="true" title="痛点与难点">
        <div class="modalContent">
          <img v-if="demandIndex === 1" src="@/assets/img/xq1.png" class="filesImg">
          <img v-if="demandIndex === 2" src="@/assets/img/xq2.png" class="filesImg">
          <img v-if="demandIndex === 3" src="@/assets/img/xq3.png" class="filesImg">
          <img v-if="demandIndex === 4" src="@/assets/img/xq4.png" class="filesImg">
        </div>
      </a-modal>

      <div v-if="iframeVisible" class="iframeBox">
        <a-icon type="close-circle" class="close" @click="closeIframe" />
        <iframe v-once :src="iframeUrl" style="width: 100%; height: 100%" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import capsuleChart from '../components/capsuleChart'

  export default {
    name: 'Index',
    components: { capsuleChart },
    filters: {
      updatetime: function (value) {
         return moment(value).format('YYYY-MM-DD HH:mm:ss')
      },
      getweek (e) {
        var week = ['一', '二', '三', '四', '五', '六', '日']
        return week[e - 1]
      }
    },
    data () {
      return {
        noTitleKey: 'tab1',
        tabList: [
          {
            key: 'tab1',
            tab: '理论成果'
          },
          {
            key: 'tab2',
            tab: '制度成果'
          },
          {
            key: 'tab3',
            tab: '推广成果'
          }
        ],
        demandVisble: false,
        demandIndex: null,
        brainVisible: false,
        iframeVisible: false,
        iframeUrl: 'http://websharing.host/618bba7f3f966/', // http://websharing.host/618bba7f3f966/
        coreVisible: false,
        coreTit: '',
        coreIndex: null,
        coreOption: {
          grid: {
            top: 15, left: 40, right: 15, bottom: 25
          },
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            data: 'value',
            min: 0,
            max: 1600
          },
          series: [
            {
              name: '企业数',
              data: [1415, 1422, 1434, 1437, 1450, 1462, 1466, 1473, 1482, 1488, 1499],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 14,
                  rotate: 45
                }
              },
              type: 'bar',
              gradient: {
                color: ['#37a2da', '#67e0e3']
              },
              animationCurve: 'easeOutBounce'
            }
          ]
        }, // 入园各月数据
        serviceOption: {
          title: {
            text: '服务覆盖率'
          },
          series: [
            {
              type: 'gauge',
              data: [ { name: 'itemA', value: 81.05, gradient: ['#ed9746', '#f1b441'] } ],
              radius: '75%',
              axisLabel: {
                style: {
                  fill: '#777'
                },
                formatter: '{value}%'
              },
              details: {
                show: true,
                offset: [0, 40],
                formatter: '{value}%'
              },
              animationCurve: 'easeOutBack'
            }
          ]
        },
        crewOption: {
          title: {
            text: '影视拍摄情况'
          },
          legend: {
            data: [
              {
                name: '已杀青',
                color: '#aeeff0'
              },
              {
                name: '在拍',
                color: '#aeeff0'
              },
              {
                name: '筹拍',
                color: '#aeeff0'
              },
              {
                name: '人流量',
                color: '#f1829f'
              }
            ]
          },
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: [
            {
              name: '剧组',
              data: 'value',
              min: 0,
              max: 300
            },
            {
              name: '勘景',
              data: 'value',
              position: 'right',
              min: 0,
              max: 1600,
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '线上勘景',
              data: [863, 986, 1020, 1067, 1156, 1254, 1288, 1309, 1338, 1413, 1432],
              type: 'line',
              smooth: true,
              lineArea: {
                show: true,
                gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
              },
              lineStyle: {
                stroke: 'rgba(251, 114, 147, 1)',
                lineDash: [3, 3]
              },
              linePoint: {
                style: {
                  stroke: 'rgba(251, 114, 147, 1)'
                }
              },
              yAxisIndex: 1
            },
            {
              name: '已杀青',
              data: [37, 50, 78, 121, 153, 202, 222, 231, 263, 270],
              type: 'bar',
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            },
            {
              name: '在拍',
              data: [8, 10, 13, 15, 18, 20, 26, 30, 48, 52, 55],
              type: 'bar',
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            },
            {
              name: '筹拍',
              data: [17, 22, 25, 28, 32, 37, 41, 46, 52, 55, 60],
              type: 'bar',
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            }
          ]
        }, // 剧组各月数据
        peopleOption: {
          title: {
            text: '影视人才情况'
          },
          legend: {
            data: ['影视人才', '活跃人数', '横影通用户']
          },
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            data: 'value'
          },
          series: [
            {
              name: '影视人才',
              data: [87927, 90876, 93456, 96724, 102894, 105088, 107560, 109563, 112638, 115089, 117341],
              type: 'bar',
              stack: 'a'
            },
            {
              name: '活跃人数',
              data: [8792, 9087, 9345, 9672, 10289, 10588, 11056, 11953, 12638, 14367, 15720],
              type: 'bar',
              stack: 'a'
            },
            {
              name: '横影通用户',
              data: [8792, 9087, 9345, 9672, 10289, 10588, 11056, 11953, 12638, 14367, 6593],
              type: 'bar',
              stack: 'a'
            }
          ]
        }, // 人才各月数据
        recceVisible: false,
        partInVisible: false,
        filesVisible: false,
        filesTitle: '',
        filesImgSrc: '',
        timer: null,
        nowtime: new Date(),
        week: moment().format('E'),
        aboutData: [
          { tit: '牵头单位', des: '横店影视文化产业集聚区管委会' },
          { tit: '协同单位', des: '市委宣传部、市公安局、市经信局、市人社局、市卫健局、市人才办、市教育局、市民政局、市应急管理局、市文旅局、市商务局、市市场监管局、市金融办' },
          {
            tit: '场景简介',
            des: '横店影视文化产业大脑是全国影视文化领域具有开创性的重大集成系统，创新影视作品从剧本创作、剧组筹备、影视拍摄、后期制作、宣传发行、版权交易及开发的数字化全链条闭环，主动感知归集11类数据，建立分析模型，推动产业治理由经验判断向数据智能决策转变，是影视文化产业高质量发展创新尝试，在全国具有先行示范作用。\n' +
              '首期“影视拍摄在线”重点服务影视拍摄关键环节，集成政府管理、演职人员服务、剧组生产、基地配套供给等四大方面功能。\n'
          },
          { tit: '服务对象', des: '在横店相关影视企业、人员、剧组' }
        ],
        coreIndexData: [
          { ico: 'icon-guoji', num: '1,499', unit: '家', name: '入区企业' },
          { ico: 'icon-zhishu', num: '269', unit: '个', name: '剧组' },
          { ico: 'icon-jujiqu-01', num: '117,341', unit: '人', name: '影视人才' },
          { ico: 'icon--fuwu', num: '1,215', unit: '家', name: '服务覆盖', ratio: '81.05%' },
          { ico: 'icon-daohangjuzu', num: '55', unit: '个', name: '在拍剧组', ratio: '20.45%' },
          { ico: 'icon-huoyuerenshu', num: '15,720', unit: '人', name: '活跃人数', ratio: '13.39%' },
          { ico: 'icon-fazhanguanli', num: '165.76', unit: '亿元', name: '年度累计营收' },
          { ico: 'icon-a-zu17545', num: '1,432', unit: '次', name: '线上勘景' },
          { ico: 'icon-renshu', num: '6,593', unit: '人', name: '横影通用户' }
        ],
        coreIndexL: [
          { type: 0, ico: 'icon-guoji', num: '1,499', unit: '家', name: '入区企业' },
          { type: 0, ico: 'icon--fuwu', num: '215', unit: '家', name: '服务覆盖', ratio: '14.34%' },
          { type: 0, ico: 'icon-fazhanguanli', num: '165.76', unit: '亿元', name: '年度累计营收' }
        ],
        coreIndexC: [
          { type: 1, ico: 'icon-zhishu', num: '269', unit: '个', name: '剧组' },
          { type: 1, ico: 'icon-daohangjuzu', num: '55', unit: '个', name: '在拍剧组', ratio: '20.45%' },
          { type: 1, ico: 'icon-a-zu17545', num: '1,432', unit: '次', name: '线上勘景' }
        ],
        coreIndexR: [
          { type: 2, ico: 'icon-jujiqu-01', num: '117,341', unit: '人', name: '影视人才' },
          { type: 2, ico: 'icon-huoyuerenshu', num: '15,720', unit: '人', name: '活跃人数', ratio: '13.39%' },
          { type: 2, ico: 'icon-renshu', num: '6,593', unit: '人', name: '横影通用户' }
        ],
        industrialData: [
          { num: 6361, unit: '家', name: '东阳' },
          { num: 2560, unit: '家', name: '横店' },
          { num: 1499, unit: '家', name: '集聚区' },
          { num: 1848.24, unit: '亿元', name: '累计营收' },
          { num: 172.15, unit: '亿元', name: '累计税收' }
        ],
        revenueOption: {
          title: {
            text: '近三年营收'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2019', '2020', '2021']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            // #d4d4d4
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            // name: '销售额',
            data: 'value',
            min: 0,
            max: 230,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '2019',
              data: [48, 60, 66, 78, 96, 120, 150, 158, 178, 190, 208, 225],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2020',
              data: [29, 36, 42, 58, 69, 89, 110, 122, 144, 150, 182, 190],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2021',
              data: [39, 46, 52, 68, 79, 109, 130, 142, 164, 170],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        }, // 营收
        taxRevenueOption: {
          title: {
            text: '近三年税收'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2019', '2020', '2021']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            // name: '销售额',
            data: 'value',
            min: 0,
            max: 30,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '2019',
              data: [3, 4, 6, 8, 11, 14, 16, 17, 20, 22, 25, 28],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2020',
              data: [3, 4, 5, 7, 8, 10, 10, 11, 11, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2021',
              data: [3, 4, 5, 7, 7, 10, 10, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        }, // 税收
        ringChartHdcp: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            {
              name: '电影',
              value: 1043,
              unit: '部'
            },
            {
              name: '网剧',
              value: 13450,
              unit: '部'
            },
            {
              name: '电视剧',
              value: 53578,
              unit: '部'
            }
          ],
          // #E85894 #a970e1 #6a92ed #ed9720 #61c1f8
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 横店出品
        spslOption: {
          title: {
            text: '影视聚集审批数量'
          },
          xAxis: {
            data: [
              '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06',
              '2021-08', '2021-07', '2021-09', '2021-10', '2021-11', '2021-12'
            ],
            axisLabel: {
              style: {
                rotate: 20,
                textAlign: 'left',
                textBaseline: 'top',
                fill: '#b7b6b6'
              }
            },
            axisTick: {
              show: false,
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            }
          },
          yAxis: [
            {
              data: 'value',
              min: 0,
              max: 20,
              interval: 5,
              splitLine: {
                style: {
                  lineDash: [3, 3]
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                style: {
                  fill: '#b7b6b6'
                }
              }
            }
          ],
          series: [
            {
              data: [
                13, 8, 11, 12, 7, 10, 9, 14, 8
              ],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 14
                }
              },
              type: 'bar',
              gradient: {
                color: ['#37a2da', '#67e0e3']
              },
              animationCurve: 'easeOutBounce'
            }
          ]
        }, // 审批数量
        movieData: [
          { num: 269, unit: '部', name: '已杀青' },
          { num: 55, unit: '部', name: '在拍' },
          { num: 60, unit: '部', name: '筹拍' },
          { num: 108.5, unit: '亿', name: '游客营收' },
          { num: 747.9, unit: '万人次', name: '游客数' }
        ], // 影视拍摄
        liveActionOption: {
          title: {
            text: '实景基地'
          },
          grid: {
            left: '23%',
            right: 0
          },
          xAxis: {
            min: 0,
            max: 100,
            data: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              // show: false
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            data: ['广州街香港街', '明清宫苑', '秦王宫'],
            axisLabel: {
              style: {
                fill: '#b7b6b6',
                fontSize: 14
              }
            },
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            }
          },
          series: [
            {
              data: [69, 83, 51],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 16
                }
              },
              gradient: {
                color: ['#67e0e3', '#37a2da']
              },
              type: 'bar',
              animationCurve: 'easeOutBack'
            }
          ]
        },
        crewNumOption: {
          title: {
            text: '近三年剧组数'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2019', '2020', '2021']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            data: 'value',
            min: 0,
            max: 30,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          series: [
            {
              name: '2019',
              data: [3, 4, 6, 8, 11, 14, 16, 17, 20, 22, 25, 28],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2020',
              data: [3, 4, 5, 7, 8, 10, 10, 11, 11, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2021',
              data: [3, 4, 5, 7, 7, 10, 10, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        },
        personnelData: [
          { name: '影视工匠总人数', num: '117341', unit: '人' },
          { name: '当前在组人数', num: '5910', unit: '人' },
          { name: '活跃人数', num: '15720', unit: '人' },
          { name: '月人均参演数', num: '10.8', unit: '次' }
        ],
        ringChartGzfx: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            {
              name: '摄像',
              value: 1043
            },
            {
              name: '演员',
              value: 53578
            },
            {
              name: '其他',
              value: 13450
            }
          ],
          // #E85894 #a970e1 #6a92ed #ed9720 #61c1f8
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 工种分析
        ringChartXlfx: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            { name: '博士', value: 589 },
            { name: '本科', value: 1898 },
            { name: '专科及以下', value: 8659 }
          ],
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 学历分析
        ringChartNlfx: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            { name: '60及以上', value: 889 },
            { name: '18-29', value: 5898 },
            { name: '30-45', value: 3659 }
          ],
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 年龄分析
        kqqkOption: {
          title: {
            text: '十一月勘景情况'
          },
          legend: {
            data: ['预约次数', '实际勘景数']
          },
          xAxis: {
            data: ['秦王宫', '明清宫苑', '广州街', '清明上河图', '梦外滩'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            data: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '预约次数',
              data: [251, 279, 279, 321, 299],
              type: 'bar',
              label: {
                show: true,
                style: {
                  fill: '#555'
                }
              }
            },
            {
              name: '实际勘景数',
              data: [57, 50, 35, 23, 21],
              type: 'bar',
              label: {
                show: true,
                style: {
                  fill: '#555'
                }
              }
            }
          ]
        }, // 勘景情况
        jzpsConfig: {
          data: [
            {
              name: '秦王宫',
              value: 41
            },
            {
              name: '明清宫苑',
              value: 32
            },
            {
              name: '广州街',
              value: 29
            },
            {
              name: '梦外滩',
              value: 22
            },
            {
              name: '清明上河图',
              value: 22
            }
          ],
          rowNum: 5,
          unit: ' 次'
        }, // 剧组拍摄数
        workData: {
          title: '横店影视文化产业大脑集中攻坚专班',
          list: ['金华市经信局', '横店影视文化产业集聚区管委会', '东阳市委改革办', '东阳市经信局', '东阳市大数据中心', '金华移动']
        },
        filesData: [
          { id: 1, name: '中国·横店影视文化产业集聚区指数', flag: 1 },
          { id: 2, name: '中国·横店影视文化产业发展环境指数', flag: 1 },
          { id: 3, name: '中国·横店影视文化产业影响力指数', flag: 1 },
          { id: 4, name: '中国·横店影视文化产业创新指数', flag: 1 },
          { id: 5, name: '中国·横店影视文化产业国际性指数', flag: 1 },
          { id: 6, name: '中国·横店影视文化产业综合景气指数', flag: 1 }
        ],
        filesData2: [
          { id: 1, name: '影视拍摄“一件事”工作指南', flag: 0 },
          { id: 2, name: '横店影视文化产业综合调查制度', flag: 0 },
          { id: 3, name: '横漂演员公约', flag: 0 },
          { id: 4, name: '剧组临时党支部规范化建设的指导意见', flag: 0 },
          { id: 5, name: '影视拍摄基地服务规范', flag: 0 },
          { id: 6, name: '横店影视产业人才基金实施办法', flag: 0 },
          { id: 7, name: '关于促进横店影视文化产业高质量发展的补充意见', flag: 0 }
        ],
        filesData3: [
          { id: 1, name: '(头版)浙江日报《这个“大脑”很懂戏 东阳开发特色应用助力影视业高质量发展》(11月15日)', flag: 0 },
          { id: 2, name: '浙江新闻《2021中国（横店）影视文化产业发展大会召开 聚焦人才、指数和“大脑”》(10月22日)', flag: 0 },
          { id: 3, name: '新华财经《横店影视文化产业大脑亮相 推动产业治理数据智能化》(10月22日)', flag: 0 },
          { id: 4, name: '环球网《2021中国（横店）影视文化产业发展大会召开 聚焦人才、指数和“大脑”》(10月24日)', flag: 0 },
          { id: 5, name: '金华政务网《实现全产业链数字化 推动治理数据智能化  产业大脑赋能横店影视文化加速跑》(10月25日)', flag: 0 },
          { id: 6, name: '广州日报《横店“大脑系统”提供影视文化产业新经验，影视“全产业链”智能迭代》(11月15日)', flag: 0 },
          { id: 7, name: '浙江省人民政府官网首页热点关注《东阳开发特色应用助力影视业高质量发展 这个“大脑”很懂戏》(11月15日)', flag: 0 }
        ],
        filesConfig: {
          data: [
            ['中国·横店影视文化产业集聚区指数'],
            ['中国·横店影视文化产业发展环境指数'],
            ['中国·横店影视文化产业影响力指数'],
            ['中国·横店影视文化产业创新指数'],
            ['中国·横店影视文化产业国际性指数'],
            ['中国·横店影视文化产业综合景气指数'],
            ['横影管〔2021〕1号关于印发《横店影视产业人才基金实施办法》的通知'],
            ['东市委办 东市府办2019年7月10日印发关于促进横店影视文化产业高质量发展的补充意见']
          ],
          index: true,
          rowNum: 8,
          columnWidth: [44],
          align: ['center'],
          oddRowBGC: '',
          evenRowBGC: ''
        } // 政策文件
      }
    },
    watch: {
      coreVisible (val) {
        if (!val) {
          this.coreIndex = null
        }
      },
      demandVisible (val) {
        if (!val) {
          this.demandIndex = null
        }
      }
    },
    mounted () {
      const _this = this
      this.timer = setInterval(() => {
        _this.nowtime = new Date()
      }, 1000)
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    methods: {
      demandClick (i) {
        this.demandVisble = true
        this.demandIndex = i
      },
      cockpitClick () {
        this.iframeVisible = true
      },
      closeIframe () {
        this.iframeVisible = false
      },
      onTabChange(key, type) {
        this[type] = key
      },
      coreClick (data, i) {
        if (i > 2) return
        this.coreIndex = data.type
        this.coreTit = data.name
        this.coreVisible = true
      },
      recceClick (type) {
        if (type === 1) {
          this.recceVisible = true
        } else {
          this.partInVisible = true
        }
      },
      brainClick () {
        this.brainVisible = true
      },
      filesRowClick (data) {
        console.log(data, '******')
        if (!data.flag) {
          this.warning()
          return
        }
        this.filesVisible = true
        this.filesTitle = data.name
        this.filesImgSrc = data.id
      },
      warning () {
        this.$message.warning('涉密不公开')
      },
      callback (key) {}
    }
  }
</script>

<style scoped lang="less">
  .difficulty {
    .diffL { width: 230px; float: left;
      .tits { font-size: 18px; font-weight: bold; margin-bottom: 20px }
      .itemXq { padding: 8px 12px; border: 1px solid #ccc; margin-bottom: 10px; border-radius: 6px;
        position: relative; cursor: pointer;
        .icoRight { font-size: 30px;
          position: absolute; right: 5px; top: 50%; margin-top: -15px; color: rgba(0,0,0, .3);}
        p { margin: 0}
      }
      .xq1{ height: 58px;}
      .xq3{ height: 79px;}
    }
    .diffR { width: calc( 100% - 270px ); float: right;
      .tits {margin-bottom: 20px}
      .tits span {font-size: 18px; font-weight: bold; display: inline-block;}
      .tits .s1{ width: 60% }
      .tits .s2{ width: 120px }
      .tits .s3{ width: calc( 40% - 125px ) }
      li{ display: flex;background: -webkit-gradient(linear, 0 0, 0 100%, from(#53a3ff), to(#6bd4fe)); color: #fff;
        padding: 8px 12px; border-radius: 6px; margin-bottom: 10px;
        p{margin: 0}
        div { display: inline-block;}
        .item1{width: 60%; padding-right: 10px}
        .item2{width: 120px;font-size: 20px}
        .item3{width: calc( 40% - 125px )}
      }
    }
    .clear { clear: both}
  }
  /deep/.dv-active-ring-chart .active-ring-info .active-ring-name {color: #999}
  /deep/.dv-capsule-chart { color: #666}
  /deep/.dv-capsule-chart .unit-label {opacity: 0}
  /deep/.ranking-info {color: #666}
  /deep/.dv-scroll-board .rows .row-item {color: #555; position: relative; border-bottom: 1px solid #ddd; overflow: hidden}
  /deep/.dv-scroll-board .rows .row-item::after {position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: #ddd;}
  /deep/.dv-scroll-board .rows .index {color: #fff}
  /deep/.dv-scroll-board .rows .ceil {padding: 0}
  .main {
    width: 100%;
    background: #d4e6fc url("~@/assets/img/bg.jpg") center top no-repeat;
    padding-top: 200px;
    overflow: hidden;
    .w {
      width: 1200px; min-width: 1100px; padding-bottom: 1px;
      margin: auto
    }

    .cardBox {
      margin-bottom: 16px;

      .tit {
        position: relative;
        padding-left: 8px
      }

      .tit::before {
        display: inline-block;
        content: '';
        width: 2px;
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        background: #1890ff
      }
      .biaoti {
        background: #f8f8f8;
        margin-bottom: 16px;
        font-size: 15px;
        padding: 8px 15px; position: relative;
      }

      .biaoti::before {
        display: inline-block;
        content: '';
        width: 2px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: #1890ff
      }
      .content+.content{ margin-top: 30px}
    }
  }

  .main .cardBox.about .tit::before {display: none}

  .buts { float: right;
    .ant-btn { margin-left: 10px; color: #fff;}
    .but-blue {background: #4c93ff; border-color: #4c93ff}
    .but-orange {background: #ec8b37; border-color: #ec8b37}
  }
  .modalContent {
    height: 420px; padding-right: 10px; overflow-x: hidden; overflow-y: auto;
    .biaoti {
      background: #f8f8f8;
      margin-bottom: 16px;
      font-size: 15px;
      padding: 8px 15px; position: relative;
    }

    .biaoti::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #1890ff
    }
  }

  .about {
    .tit {
      text-align: center;
      font-weight: bold;
      font-size: 28px; padding-left: 0;
    }

    .content {
      div {
        display: flex;
        font-size: 16px;

        span {
          color: #1890ff;
          display: inline-block;
          width: 80px;
          font-weight: bold
        }

        p {
          width: calc(100% - 80px);
        }
      }

      a {
        float: right;
        font-size: 15px;
      }
    }
  }

  .coreIndex {
    .content {
      /*display: grid; grid-template-columns: 1fr 1fr 1fr;*/
    }
    .tit span {font-size: 13px; color: #666}
    .tit .nowTime { display: inline-block; float: right; font-weight: normal}
    .items {
      padding: 10px 0 10px 10px;
      /*text-align: center;*/
      .item {
        display: inline-block;
        text-align: left;
        margin: auto;
        position: relative;
        padding-left: 55px;
      }
      .itemCursor {cursor: pointer;
        .name {color: #37a2da}
      }
      .ico {
        position: absolute;
        left: 0;
        text-align: center;
        top: 6px;
        width: 50px;
        line-height: 50px;
        height: 50px;
        background: #4194fb;
        border-radius: 50%;
      }
      .ico0{ background: #E85894}
      .ico1{ background: #a970e1}
      .ico2{ background: #6a92ed}
      .ico3{ background: #6792ec}
      .ico4{ background: #e85895}
      .ico5{ background: #ea7146}
      .ico6{ background: #ed9720}
      .ico7{ background: #61c1f8}
      .ico8{ background: #a970e1}

      .iconfont {  font-size: 30px; color: #fff;}
      .num {
        font-size: 32px; line-height: 40px;
        font-weight: 500; display: flex;
        color: rgba(0, 0, 0, 0.6);
        span {padding-top: 8px; font-weight: initial;
          line-height: 32px; font-size: 15px; margin-left: 5px; color: #777 }
      }

      .name {
        display: inherit;
      }
    }

  }

  .flowPath {
    .subTit {
      width: 100%;
      margin: auto;
      border-radius: 5px;
      color: #1890ff;
      padding: 8px 0;
      font-size: 20px;
      background: #e6f7ff;
      text-align: center;
    }

    .subCon {
      padding-top: 20px;
    }

    .subCardTit {
      text-align: center; color: #1890ff; font-weight: bold;}
    .grey {
      color: #999
    }
    .subCardTxt { width: 100%; text-align: center;
      img { display: inline-block; vertical-align:middle}
    }
  }
  .teamwork {
    .item {
      box-shadow: 3px 3px 5px #d0d0d0;
      width: 96%; margin:15px auto; border-radius: 8px; padding: 15px; position: relative; color: #fff;}
    .name { font-size: 18px; margin-bottom: 5px}
    .desc {min-height: 57px; font-size: 13px}
    .itemBg1 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#e73eb0), to(#e83fc6));
    }
    .itemBg2 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#ed9746), to(#f1b441));
    }
    .itemBg3 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#53a3ff), to(#6bd4fe));
    }
    .itemBg4 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#68d3ca), to(#73eaba));
    }
    .brainBox { position: relative; margin: 76px 0; text-align: center;
      height: 120px;
      .topLine { position: absolute; top:-45px; left: 132px; right: 132px; height: 1px; background: #ccc;
        span {position: absolute; width: 1px; height: 46px; background: #ccc;}
        .l1{ left: 0; top: -46px}
        .l2{ left: 33.33%; top: -46px}
        .l3{ right: 33.33%; top: -46px}
        .l4{ right: 0; top: -46px}
      }
      .bottomLine {
        position: absolute; bottom:-45px; left: 132px; right: 132px; height: 1px; background: #ccc;
        span {position: absolute; width: 1px; height: 46px; background: #ccc;}
        .l1{ left: 0; bottom: -46px}
        .l2{ left: 33.33%; bottom: -46px}
        .l3{ right: 33.33%; bottom: -46px}
        .l4{ right: 0; bottom: -46px}
        .l5{ bottom: 0; height: 45px;}
      }
      .brain { display: inline-block; margin: auto;
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#ec8b50), to(#e86129)); color: #fff;
        border: 6px solid #f8dbd7;
        width: 120px; height: 120px; border-radius: 50%; overflow: hidden; cursor: pointer;box-shadow: 3px 3px 5px #b7b5b5;
        .itemP { padding-top: 28px; font-size: 18px}
        p { margin:0}
      }
    }

  }
  .appEffect {
    .itemBox{ display: flex; padding-top: 15px;
      .items { width: 25%; padding: 0 15px;
        .item{ height: 58px;
          /*background-image: url("~@/assets/img/icon.png");*/
          background-repeat: no-repeat;
          background-position: left center;
          background-size: contain;
          display: flex;
          flex-flow: column;
          align-items: flex-start;
          justify-content: space-evenly; position: relative;
          .ico {
            position: absolute;
            left: 0;
            text-align: center;
            top: 4px;
            width: 50px;
            line-height: 50px;
            height: 50px;
            background: #4194fb;
            border-radius: 50%;
          }
          .ico0 { background: #E85894 }
          .ico1 { background: #a970e1 }
          .ico2 { background: #6a92ed }
          .ico3 { background: #ed9720 }
          .ico4 { background: #61c1f8 }
          .iconfont {  font-size: 30px; color: #fff;}
          p{margin-left: 65px; margin-bottom: 0; color: #666}
          p.val {font-size: 28px; line-height: 30px; color: #2e7cf9} // #d66f05
          small {font-size: 15px; margin-left: 5px; color: #777}
        }
      }
    }
    .label-tag {
      width: calc( 100% - 260px);
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      .label-item {
        margin: 5px;
        font-size: 16px;
        display: flex;
        align-items: center; color: #666;
        span{ font-weight: bold; margin-left: 10px;}
        div {
          width: 12px;
          height: 12px;
          margin-right: 5px;
        }
      }
    }
    .person {}
    .labelTag { text-align: center; display: block}
    .labelItem {margin: 0 5px;font-size: 16px;display: inline-block;
      align-items: center; color: #666;
      div {
        width: 12px;
        height: 12px; display: inline-block;
        margin-right: 5px;
      }
    }
  }
  .title{ text-align: center; font-size: 16px; font-weight: bold; padding: 20px 0;}
  .personnel {
    display: flex;
    li { width: 25%; padding-bottom: 10px; padding-top: 10px; text-align: center }
    div {display: inline-block;position: relative; text-align: left}
    .ico {
      position: absolute;
      left: 0;
      text-align: center;
      top: 0;
      width: 50px;
      line-height: 50px;
      height: 50px;
      background: #4194fb;
      border-radius: 50%;
    }
    .ico0 { background: #E85894 }
    .ico1 { background: #a970e1 }
    .ico2 { background: #6a92ed }
    .ico3 { background: #ed9720 }
    .ico4 { background: #61c1f8 }
    .iconfont {  font-size: 30px; color: #fff;}
    p { margin-bottom: 0; padding-left: 60px;}
    .val { font-size: 25px; height: 28px; line-height: 28px; color: #2e7cf9}
    span {font-size: 14px; color: #777; margin-left: 5px;}
  }
  .work {
    text-align: center; display: grid; grid-auto-columns: 1fr; font-size: 15px; height: 350px;
    .itemTit {
      display: inline-block;
      margin: auto;
      border: 1px solid #3c70fb;
      padding: 10px 15px;
      font-weight: bold; background: #3c70fb; color: #fff;
      position: relative; margin-bottom: 30px;
    }
    .itemTit::after { content: ''; display: inline-block; width: 1px; height: 30px; background: #ccc;
      position: absolute; left: 50%; bottom: -30px;
    }
    .itemWarp {
      display: inline-block;
      margin: auto; margin-top: 29px;
      .items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-sizing: border-box; position: relative;
        .item {writing-mode:vertical-lr;
          border: 1px solid #ccc; padding: 15px 10px; margin: 0 20px; position: relative; background: #e1f0ff;
        }
        .item::before {content: ''; display: inline-block; width: 1px; height: 30px; background: #ccc;
          position: absolute; left: 50%; top: -30px;}
      }
      .items::before {
        content: ''; display: inline-block; height: 1px; background: #ccc;
        position: absolute; left: 42px; right: 41px; top: -30px;
      }
    }
  }
  .files {
    li { border-bottom: 1px solid #ddd; display: flex; padding: 10px 8px; cursor: pointer}
    span {display: inline-block; background-color: #00BAFF; border-radius: 3px;
      padding: 0px 3px; color: #fff;}
    p {margin-bottom: 0; padding-left: 8px;}
  }
  .filesImg {max-width: 100%; display: block; margin: auto}
  .ellipsis{overflow: hidden; text-overflow:ellipsis;
    white-space: nowrap;}
  .iframeBox {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999}
  .close { color: #fff; position: absolute; top: 20px; right: 20px; z-index: 6666; font-size: 30px; cursor: pointer}
</style>
